<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card" style="min-height: 200px;">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="建议反馈类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择建议反馈类型">
                                <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="反馈内容" prop="content">
                            <Editor v-model="form.content" style="height: 600px;"></Editor>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click.native.prevent="submitForm">立即反馈</el-button>
                            <el-button size="small" @click="resetForm">重 置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import Editor from '../../../components/Editor'
    export default {
        data() {
            return {
                options: [{
                    value: '话题新增',
                    label: '话题新增',
                }, {
                    value: '优化改进',
                    label: '优化改进',
                }, {
                    value: '用户体验',
                    label: '用户体验',
                }, {
                    value: '严惩力度',
                    label: '严惩力度',
                }, {
                    value: '广告接入',
                    label: '广告接入',
                }, {
                    value: '友情链接',
                    label: '友情链接',
                }, {
                    value: '板块扩充',
                    label: '板块扩充',
                }, {
                    value: '其他',
                    label: '其他',
                }],
                form: {
                    type: '',
                    content: '',
                },
                rules: {
                    type: [{
                            required: true,
                            message: '建议反馈类型不能为空',
                            trigger: 'blur'
                        }
                    ],
                    content: [{
                        required: true,
                        message: '反馈内容不能为空',
                        trigger: 'blur'
                    }, {
                        min: 10,
                        message: '反馈内容需大于 10 字符',
                        trigger: 'blur'
                    }],
                }
            }
        },
        components: {
            Editor
        },
        methods: {
            resetForm() {
                this.$refs.form.resetFields()
            },
            submitForm() {
                const _this = this
                _this.$refs.form.validate(vaild=>{
                    if (vaild) {
                        const params = _this.form
                        _this.axios.post(_this.$API.ZHIHUAPI.feedbackManagerFeedback, _this.qs.stringify(params)).then((res) => {
                            res = res.data
                            if (res.code === 10000) {
                                _this.$message({
                                    showClose: false,
                                    message: res.message,
                                    type: 'success'
                                })
                                // 跳转首页
                                setTimeout(() => {
                                    this.$router.push({path: `/customer/customerHome`})
                                }, 1000);
                            } else {
                                _this.$message({
                                    showClose: false,
                                    message: res.message,
                                    type: 'error'
                                })
                            }
                        }).catch(() => {
                            _this.$message({
                                showClose: false,
                                message: '网络连接失败，请重试！',
                                type: 'error'
                            })
                        })
                    }
                })
            },
        }
    }
</script>

<style scoped>
 /deep/ .editor {
  line-height: normal !important;
  height: 500px;
}
</style>
